<script setup lang="tsx">
import { ref } from "vue";

import { routeRecordRaw } from '@/router/record'
import type { MenuMixedOptions } from '@/router/helper'

import ToolItem from '@/components/tools/ToolItem.vue'

// 递归遍历 routeRecordRaw，获取所有 isTool 为 true 的节点
function getAllToolItems(items: MenuMixedOptions[], parentPath: string = ''): MenuMixedOptions[] {
  const tools: MenuMixedOptions[] = [];
  
  items.forEach(item => {
    // 构建完整路径
    const currentPath = item.path ? 
      (parentPath ? `${parentPath}/${item.path.replace(/^\//, '')}` : item.path) : 
      '';
    
    // 创建一个新的item对象，确保不修改原始数据
    const itemWithFullPath = { ...item };
    
    // 更新路径为完整路径
    if (currentPath) {
      itemWithFullPath.path = currentPath;
    }
    
    // 检查当前项是否是工具
    if (itemWithFullPath?.isTool) {
      tools.push(itemWithFullPath);
    }
    
    // 递归检查子项，传递当前路径作为父路径
    if (itemWithFullPath?.children?.length > 0) {
      tools.push(...getAllToolItems(itemWithFullPath.children, currentPath));
    }
  });
  
  return tools;
}

const menus = getAllToolItems(routeRecordRaw)

</script>
<template>
  <div class="flex flex-wrap gap-3 p-3">
    <template v-for="(item, index) in menus" :key="index">
      <ToolItem :item="item" />
    </template>
  </div>
</template>
<style lang="less" scoped></style>